export default {
  name: 'Usual',
  data(){
    return{
      popData: [
        {
          name: "devideID",
          cn: "机组编号",
          value: "加载中..."
        },
        {
          name: "outDate",
          cn: "出厂日期",
          value: "加载中..."
        },
        {
          name: "run",
          cn: "是否运行",
          value: "加载中..."
        },
        {
          name: "alert",
          cn: "是否报警",
          value: "加载中..."
        },
        {
          name: "load",
          cn: "运载负荷率",
          value: "加载中..."
        },
        {
          name: "runTime",
          cn: "运行时间",
          value: "加载中..."
        }
      ],
      show: false,
      mapData: {
        height:'100%',
        longitude:116.417854,
        latitude:39.921988
      },  
      style:{
        width:'100%',
        height:'100%'
      },
      popStyle: {
        left: '0px',
        top: '0px'
      },
      data_info:[]
    }
  },
  /*props:{   //里面存放的也是数据，与data里面的数据不同的是，这里的数据是从其他地方得到的数据
    height:{
      type:Number,
      default:300
    },
    longitude:{//定义经度
      type:Number,
      default:116.404
    },
    latitude:{//定义纬度
      type:Number,
      default:39.915
    }
  },*/
  //props:['om'],    //通过props属性，将从父级得到的数据传给子级
  mounted(){
    this.feathData();//axios时使用
    //静态添加地图点时使用
    /*      
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(this.mapData.longitude,this.mapData.latitude);
      map.centerAndZoom(point, 15);
      var marker = new BMap.Marker(point);  // 创建标注
      map.addOverlay(marker);               // 将标注添加到地图中
      marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    */
  },
  created() {
    this.mapData = {
      height:400,
      longitude:116.417854,
      latitude:39.921988
    }
  },
  methods:{
    popHide() { this.show = false; },
    feathData(){
      var _this=this;
      this.$http.get('./static/data.json').then((res)=>{
        _this.data_info=res.data;
        // console.log(res.data);
        // console.log(_this.data_info);
        // console.log(_this.data_info[0]);
        // console.log(_this.data_info[0].point1);
        // console.log(_this.data_info.length);
        // console.log(_this.mapData.longitude)
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(_this.mapData.longitude,_this.mapData.latitude), 15);
        map.enableScrollWheelZoom(true); //开启滚轮播放
        map.addControl(new BMap.NavigationControl({//右上角缩放、移动
          anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL
        })); 
        map.enableInertialDragging();
        map.enableContinuousZoom();
        var size = new BMap.Size(10, 20);
        map.addControl(new BMap.CityListControl({//切换城市
            anchor: BMAP_ANCHOR_TOP_LEFT,
            offset: size
        }));
        map.addControl(new BMap.GeolocationControl());
        var opts = {
              width : 250,     // 信息窗口宽度
              height: 80,     // 信息窗口高度
              title : "信息窗口" , // 信息窗口标题
              enableMessage:true//设置允许信息窗发送短息
            };
        var myIcon = new BMap.Icon("./static/ico.png", new BMap.Size(20,29));//自定义点图标

        var markers = [];
        for(var i=0;i<_this.data_info.length;i++){
          var marker = new BMap.Marker(new BMap.Point(_this.data_info[i].point1,_this.data_info[i].point2),{icon:myIcon});  // 创建标注
          markers.push(marker);
          var content = {
            devideID: _this.data_info[i].devideID,
            outDate: _this.data_info[i].outDate,
            run: _this.data_info[i].run ? '运行中' : '已停运',
            alert: _this.data_info[i].alert ? '是' : '否',
            load: _this.data_info[i].load,
            runTime: _this.data_info[i].runTime
          }
          map.addOverlay(marker);               // 将标注添加到地图中
          //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
          addClickHandler(content,marker);
        }
        var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
        function addClickHandler(content,marker){
          marker.addEventListener("mouseover",function(e){
              // openInfo(content,e)
              openPoint(content, e)
            }
          );
        };
        function openInfo(content,e){
          var p = e.target;
          var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
          var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
          map.openInfoWindow(infoWindow,point); //开启信息窗口
        };
        function openPoint(content, e) {
          _this.show = false;
          setTimeout(function () {
            _this.popStyle.left = e.clientX + 'px';
            _this.popStyle.top = e.clientY + 'px';
            if(e.clientY > 320) {
              _this.popStyle.top = '320px'
            }
            _this.show = true;
            _this.popData.forEach(function (val, idx) {
              for(var key in content) {
                if(val.name == key) {
                  val.value = content[key]
                }
              }
            })  
          }, 300);

        }
      }).catch((err)=>{
        console.log(err);
      });
    }
  }  
}